<template>
  <view class="info-close">
    <view class="c-tips">
      <view class="t-title">待兑换</view>
      <view class="t-time">
        <view>剩余时间:</view>
        <view class="minute">29</view>
        <view>:</view>
        <view class="second">26</view>
      </view>
      <view class="t-text">将自动关闭</view>
    </view>
    <view class="c-content">
      <view class="c-title">内衣产品</view>
      <view class="c-goods-info">
        <image class="i_left" />
        <view class="i_right">
          <view>dsadas撒大声大所多大萨达阿萨德大萨达阿诗丹顿</view>
          <view>
            <text>jdasidas</text>
            <text>x3</text>
          </view>
          <view>规格：黑色/70A</view>
        </view>
      </view>
      <view class="c-item">
        <view class="c-item_left">订单编号</view>
        <view class="c-item_right">{{ getObjVal(orderFormInfo,'sn') }}</view>
      </view>
      <view class="c-item">
        <view class="c-item_left">订单金额</view>
        <view class="c-item_right" style="color:#FF0000">￥248</view>
      </view>
      <view class="c-item">
        <view class="c-item_left">创建时间</view>
        <view class="c-item_right">{{ getObjVal(orderFormInfo,'createTime') }}</view>
      </view>
      <view class="c-item">
        <view class="c-item_left">收货地址</view>
        <view class="c-item_right">{{ getObjVal(orderFormInfo,'recipientAddress') }}/{{ getObjVal(orderFormInfo,'recipient') }}/{{ getObjVal(orderFormInfo,'recipientMobile') }}</view>
      </view>
      <view class="c-footer">
        <button class="f-btn f-btn--cancel" @tap="cancel">取消订单</button>
        <button class="f-btn f-btn--pay">去兑换</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  props: {
    orderFormInfo: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {}
  },
  computed: {},
  created () { },
  mounted () { },
  methods: {
    cancel (id) {
      this.showModal('是否取消订单?', '', '确认', async () => {
        const res = await OrderForm.sendApi('formCancel', {
          params: {
            id
          },
          data: {}
        })
        if (res.status) {
          this.toast('订单取消成功');
        } else {
          this.toast('订单取消失败');
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.info-close {
  .layout_flex(@d:column);
  background: #f7f7f7;
  .c-tips {
    .layout_flex(@d:column);
    width: 690rpx;
    padding: 30rpx 0;
    margin: 30rpx 0;
    background: #fff;
    border-radius: 10rpx;
    .t-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }
    .t-time {
      .layout_flex();
      margin-top: 20rpx;
      font-size: 26rpx;
      font-weight: 400;
      color: #f00;

      .minute {
        margin: 0 12rpx;
      }

      .second {
        margin-left: 12rpx;
      }

      .minute,
      .second {
        width: 40rpx;
        height: 40rpx;
        font-size: 30rpx;
        font-weight: bold;
        color: #f00;
        text-align: center;
        line-height: 40rpx;
        background: #ffe1e1;
        border-radius: 5rpx;
      }
    }
    .t-text {
      margin: 20rpx 0;
      font-size: 30rpx;
      font-weight: 500;
      color: #666;
    }
  }
  .c-content {
    width: 650rpx;
    padding: 30rpx 20rpx;
    margin-bottom: 100rpx;
    background: #fff;
    border-radius: 10rpx;
    .c-title {
      font-size: 34rpx;
      font-weight: 500;
      color: #000;
    }
    .c-goods-info {
      .layout_flex();
      padding: 20rpx 0;
      .i_left {
        width: 120rpx;
        height: 120rpx;
        margin-right: 20rpx;
        background: #f8c301;
        border-radius: 10rpx;
      }
      .i_right {
        view {
          &:nth-child(1) {
            width: 480rpx;
            font-size: 28rpx;
            font-weight: 500;
            color: #333;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          &:nth-child(2) {
            .layout_flex(@j:space-between);
            margin: 10rpx 0;
            font-size: 24rpx;
            font-weight: 500;
            color: #999;
          }
          &:nth-child(3) {
            .layout_flex(@j:space-between);
            font-size: 20rpx;
            font-weight: 500;
            color: #666;
          }
        }
      }
    }
    .c-item {
      .layout_flex(@a:start,@j:space-between);
      padding: 30rpx 0;
      &_left {
        font-size: 30rpx;
        font-weight: 500;
        color: #666;
      }
      &_right {
        width: 450rpx;
        text-align: right;
        word-break: break-all;
      }
    }
    .c-footer {
      .layout_flex(@j:flex-end);
      .f-btn {
        width: 180rpx;
        height: 60rpx;
        margin: 0;
        font-size: 30rpx;
        font-weight: 400;
        text-align: center;
        line-height: 60rpx;
        background: #fff;
        border-radius: 30rpx;
        &--cancel {
          margin-right: 20rpx;
          color: #666;
          border: 1rpx solid #999;
        }
        &--pay {
          color: #ff3d2b;
          border: 1rpx solid #ff3d2b;
        }
      }
    }
  }
}
</style>
